<template>
  <div class="list">
    <ul class="icon">
      <li>
        <van-icon
          name="https://yanxuan.nosdn.127.net/a03dd909803b9ac032eba58b7253a2f6.png"
          size=" 0.9rem"
        />网易自营品牌
      </li>
      <li>
        <van-icon
          name="https://yanxuan.nosdn.127.net/2d0402ffcd52b3ec3b07422681c42a89.png"
          size=" 0.9rem"
        />30天无忧退货
      </li>
      <li>
        <van-icon
          name="https://yanxuan.nosdn.127.net/eb61ee48e8942dbd1784c9ee75ebe955.png"
          size=" 0.9rem"
        />48小时快速退款
      </li>
    </ul>

    <!-- 宫格列表 -->
    <van-grid :column-num="5">
      <van-grid-item
        v-for="(v, index) in listArr"
        :key="index"
        :icon="v.img"
        :text="v.str"
        :to="v.to"
      />
    </van-grid>
  </div>
</template>

<script>
import service from '../../../request/service'
export default {
  data() {
    return {
      listArr: []
    };
  },
  mounted(){
        service({
            url: 'http://localhost:3000/shouyelist',
            method: 'get',
        }).then((res) => {
            this.listArr = res.data

        });       
    }
};
</script>

<style  scoped>
    .list ul{
        display: flex;
        justify-content: space-around;
        font-size: 0.625rem;
        color:#333333;
    }
    .list .van-icon{
        vertical-align: sub;
    }
    .van-grid-item .van-icon__image{
        width: 3.125rem;
        height:3.25rem;
    }
    .van-grid-item .van-grid-item__content::after{
        border:0;
    }
    .van-grid-item .van-grid-item__content{
        padding: 8px 8px 4px 8px;
    }
</style>